<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- validate -->
<link href="light/css/jquery.validate.css" rel="stylesheet">
<!-- alert -->
<link rel="stylesheet" href="light/css/jquery.growl.css">
<style>
body{
	font-family:"Arial","微軟正黑體";
}

.riddle_container1 {
	margin: 20% 10% 0 15%;
}

.riddle_container2 {
	margin: 20% 15% 0 25%;
}

.riddle_chg {
	margin-top: 20%;
}

.riddle_spanchg {
	color: #fff;
	float: right;
}

.riddle_text {
	padding: 5%;
	width: 95%;
	height: 10%;
	border: 0px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
}

.loveriddlecard {
	width: 580px;
	height: 330px;
	position: relative;
	background: url(light/img/l_bg.PNG) no-repeat;
	border-radius: 5%;
	box-shadow: 4px 4px 12px 4px rgba(20%, 20%, 40%, 0.3);
}

.loveriddlecard1 {
	width: 50%;
	height: 100%;
	float: left;
	border-radius: 5% 0 0 5%;
	/*background-color:#EF5D60;*/
}

.loveriddlecard2 {
	width: 50%;
	height: 100%;
	float: left;
	border-radius: 0 5% 5% 0;
	/*background-color: #6A2E35;*/
}

.loveman {
	width: 100%;
	height: 100%;
	margin-left: 25%;
	position: absolute;
}

.loveman img {
	width: 50%;
	height: 100%;
}

.loveriddle_btn {
	margin: 20% 0 0 55%;
	border: 2px solid #e6e1e2;
	display: inline-block;
	text-decoration: none;
	font-size: 18px;
	padding: 5% 10%;
	color: #e6e1e2;
	cursor: pointer;
	background: #6A2E35;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-ms-border-radius: 5px;
	-o-border-radius: 5px;
	border-radius: 5px;
	-webkit-transition: background-color 0.5s;
	-moz-transition: background-color 0.5s;
	-o-transition: background-color 0.5s;
	transition: background-color 0.5s;
}

.loveriddle_btn:hover {
	background: #EF5D60;
	color: #000000;
	font-weight: bold;
}
</style>
</head>
<body>
<div id="view"></div>
<form id="sendForm" action="checkAnswer" method="post">
	<div class="container" id="content">
		<div class="grid_6 loveriddlecard">
			<div class="loveriddlecard1">
				<div class="riddle_container1">
					<h2>
						<span>燈謎</span>
					</h2>
					<h3 class="riddle_chg">example_question</h3>
				</div>
			</div>
			<div class="loveriddlecard2">
				<div class="riddle_container2">
					<h2>
						<span class="riddle_spanchg"><label for="riddleAns">謎底</label></span>
					</h2>
					<input type="text" class="riddle_chg riddle_text" id="riddleAns"
						name="riddleAns" placeholder="請輸入答案" value="">
					<button class="loveriddle_btn">確認</button>
				</div>
			</div>
		</div>
	</div>
</form>
	<!-- import jquery -->
	<script
		src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
	<!-- bpopup -->
	<script src="light/js/jquery.bpopup.min.js"></script>
	<!-- alert  -->
	<script src="light/js/jquery.growl.js" type="text/javascript"></script>
	<!-- validate -->
	<script src="js/jquery.validate.js"></script>
	<script src="js/messages_zh_TW.js"></script>
	<script>
		$(function() {
			var id=location.search.trim().split("=")[1];
			$("#sendForm").validate({
				rules : {
					riddleAns :"required"
				},
				submitHandler : function() {
					$.ajax({
						type : "post",
						url : "checkAnswer",
						data : {
							id : id,
							riddleAns : $('#riddleAns').val()
						},
						success : function(flag) {
							if (flag == true) {
								location.replace("http://localhost:8080/Proactive/lightHtml?id="+id);
							} else
								$.growl.error({
									message : "答錯囉~快去問你的寄件人吧!"
								});
						}
					});
				}
			});
			
			$.ajax({
				type:"post",
				url:"checkWho",
				data:{
					id:id
				},
				success:function(flag){
					if(flag==true){
						$('#riddleAns').val("example_answer");
					}
				}			
			});
		});
	</script>
</body>
</html>